<template>
  <el-card class="box-card">
    <div
        v-for="(item, index) in items"
        :key="index"
        class="text item"
        @click="toggleSelect(item)"
        :class="{ selected: selectedItem === item }"
        :style="{ backgroundColor: getColorByStatus(item.status), cursor: 'pointer' }"
    >
      <i class="el-icon-check" :style="{ color: item.selected ? 'green' : 'gray' }"></i>
      {{ item.content }}
    </div>
  </el-card>
</template>

<script>
export default {
  name: "checkResult",
  data() {
    return {
      items: [
        { id: 1, content: 'HXD2-1497B', selected: false, status: 'active' },
        { id: 2, content: 'HXD1-1122A', selected: false, status: 'active' },
        { id: 3, content: 'HXD1C-3102', selected: false, status: 'inactive' },
        { id: 4, content: 'HXD1-1123B', selected: false, status: 'inactive' }

      ],
      selectedItem: null,
    };
  },
  methods: {
    toggleSelect(item) {
      if (this.selectedItem === item) {
        // 如果再次点击已选中的项，则取消选中
        this.selectedItem = null;
        item.selected = false;
      } else {
        // 否则，更新选中项
        this.selectedItem = item;
        item.selected = true;
      }
    },
    getColorByStatus(status) {
      switch (status) {
        case 'active':
          return 'lightgreen'; // 活跃状态下的背景色
        case 'inactive':
          return 'lightcoral'; // 非活跃状态下的背景色
        default:
          return '#f5f7fa'; // 默认背景色
      }
    }
  }
};
</script>

<style scoped>
.box-card .item {
  cursor: pointer;
  display: flex;
  align-items: center;
  border-left: 4px solid transparent; /* 默认左侧边框透明 */
  transition: all 0.3s ease-in-out;
}

.box-card .item i {
  margin-right: 8px;
}

.text.item {
  margin-bottom: 10px;
  padding: 20px;
  background-color: #f5f7fa;
}

.text.item:hover {
  background-color: aliceblue;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.text.item.selected {
  background-color: lightblue; /* 选中状态下的背景色 */
  border-left-color: #409EFF; /* 选中状态下的左侧边框颜色 */
}

/* 当鼠标悬停在选项上时，且该选项不是选中状态 */
.text.item:not(.selected):hover {
  background-color: #f0f9eb; /* 悬浮时的背景色，非选中状态 */
}

/* 移除最后一个元素的底部外边距 */
.text.item:last-child {
  margin-bottom: 0;
}
</style>
